<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue的标题</title>
<!--    先导入vue-->
    <script src="/js/vue.js"></script>
<!--    element样式文件-->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
<!--    element的脚本-->
    <script src="/element-ui/lib/index.js"></script>
<!--    导入axios-->
    <script src="/js/axios.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>车辆保险管理</span>
        </div>
        <div >
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>社区车辆保险管理</el-breadcrumb-item>
                <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
                <el-breadcrumb-item>车辆保险管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-card>
    <el-card class="box-card">
<!--        上面的搜索框-->
        <el-form :inline="true" size="small" :model="param"  class="demo-form-inline">
                <el-form-item label="投保日期">
                    <el-date-picker
                            v-model="param.insuranceDate"
                            type="datetime" value-format="yyyy-MM-dd"
                            placeholder="选择投保日期"
                            style="width:100%">
                    </el-date-picker>
                </el-form-item>
            <el-form-item label="截至日期">
                <el-date-picker
                        v-model="param.deadlineDate"
                        type="datetime" value-format="yyyy-MM-dd"
                        placeholder="选择截至日期"
                        style="width:100%">
                </el-date-picker>
            </el-form-item>
                <el-form-item label="状态" label-width="90px" prop="buildingId">
                    <el-select v-model="param.insuranceState" placeholder="请选择" clearable>
                        <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                    <el-button type="success" @click="showDialog" icon="el-icon-document-add">添加</el-button>
                    <el-button type="danger" @click="deleteBatch" icon="el-icon-delete">删除</el-button>
                    <el-button type="warning" @click="exportToExcel">导出保险记录</el-button>
                    <!--
display: inline 让按钮与前面的按钮显示在同一行
action: 上传地址
multiple: 选多个文件
limit: 限制上传个数
name: 名字必须与 MultipartFile file 名字一样
show-file-list: 隐藏上传文件列表
accept: 限制文件类型 xls, xlsx
on-success: 上传成功的回调函数
-->
                    <el-upload style="display: inline; margin-left: 10px;"
                               :on-success="handleSuccess"
                               :show-file-list="false"
                               accept="application/vnd.ms-excel,application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet"
                               name="file"
                               action="/carInsurance/importFromExcel">
                        <el-button type="primary" icon="el-icon-upload">导入Excel</el-button>
                    </el-upload>
                </el-form-item>
        </el-form>
<!--        表格-->
        <el-table
                ref="multipleTable"
                :data="pageInfo.list"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
<!--            复选框-->
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="carNumber"
                    label="车牌号"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="policyNumber"
                    label="保险单号"
                    width="120">
            </el-table-column>
            <!--
            表示1列
            prop：数据对象中属性名
            label：列标题
            width：这列宽度
            -->
            <el-table-column
                    prop="insuranceCompany"
                    label="保险公司名称"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="insuranceDate"
                    label="投保日期"
                    width="120">
            </el-table-column>


            <el-table-column
                    prop="deadlineDate"
                    label="截至日期"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="operatingMileage"
                    label="运营里程数(公里)"
                    width="160">
            </el-table-column>

            <el-table-column
                    prop="insuranceState"
                    label="状态"
                    width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.insuranceState==0" type="danger"  size="medium" disable-transitions>未投保</el-tag>
                    <el-tag v-else-if="scope.row.insuranceState==1" type="success"  size="medium" disable-transitions>已投保</el-tag>
                    <el-tag v-else-if="scope.row.insuranceState==2" type="danger"  size="medium" disable-transitions>已过期</el-tag>

                </template>
            </el-table-column>





<!--            按钮-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"  icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger" icon="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--
        分页组件
        @size-change 页面大小发送改变时的事件处理函数
        @current-change 页码变化时的事件处理函数
        :current-page 当前页码
        :page-size 每页的大小
        :total 总记录数
        layout 页码组件出现哪些布局元素
        -->
<!--        所有的组件是基于vue的，所以vue先加载完毕之后组件再加载完毕-->
        <el-pagination style="margin-top: 15px"
                       background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
        </el-pagination>
    </el-card>
<!--    添加车辆保险对话框-->
    <el-dialog title="添加/修改车辆保险" :visible.sync="dialogFormVisible" width="550px">
        <el-form ref="ruleForm"  label-width="90px" :rules="rules" :model="carInsurance"  size="small">

<!--            <el-form-item label="房间号" label-width="90px" prop="buildingId">-->
<!--                <el-select v-model="carInsurance.houseId"   placeholder="请选择房间号" style="width: 200px" >-->
<!--                    <el-option v-for="(ownerDto,index) in ownerDtos" :key="ownerDto.houseId" :label=`${ownerDto.numbers}`  :value="ownerDto.houseId">-->

<!--                    </el-option>-->
<!--                </el-select>-->
<!--            </el-form-item>-->

            <el-form-item label="车牌号" label-width="90px" prop="ddfe">
                <!--
                               clearable 是否会出现x清除按钮
                               filterable 是否可以搜索
                               remote 是否为远程搜索
                               reserve-keyword 是否在选中一个选项后保留当前搜索关键字 -->
                <el-select
                        v-bind:disabled="remoteDisabled"
                        v-model="carInsurance.carId"
                        filterable
                        clearable
                        remote
                        reserve-keyword
                        placeholder="车牌号"
                        :remote-method="remoteMethod"
                        @change="showFrame"
                        :loading="loading">
                    <el-option
                            v-for="car in cars"
                            :key="car.id"
                            :label="car.carNumber"
                            :value="car.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <!--            <el-form-item label="车牌号" label-width="90px" prop="ddfe">-->

            <!--                    <el-input  placeholder="车牌号" disabled   v-model="carMaintenance.carNumber"     style="width: 200px;" ></el-input>-->

            <!--            </el-form-item>-->


            <el-form-item label="车架号" label-width="90px" prop="sef">

                <el-input   v-model="carInsurance.frameNumber"  v-bind:disabled="remoteDisabled"  placeholder="车架号"   style="width: 200px;" ></el-input>

            </el-form-item>

            <el-form-item label="保险单号" label-width="90px" prop="hou">
                    <el-input v-model="carInsurance.policyNumber"  placeholder="请输入保险单号"   style="width: 200px;" ></el-input>
            </el-form-item>

            <el-form-item label="保险公司名称" >
                <el-input v-model="carInsurance.insuranceCompany" placeholder="请输入保险公司名称"   style="width: 200px;" ></el-input>

            </el-form-item>





            <el-form-item label="投保日期"  prop="intoDate">
                <el-date-picker
                        v-model="carInsurance.insuranceDate"
                        type="datetime" value-format="yyyy-MM-dd"
                        placeholder="选择日期时间"
                        style="width:100%">
                </el-date-picker>
            </el-form-item>







            <el-form-item label="截至日期" prop="storey">
                <el-date-picker
                        v-model="carInsurance.deadlineDate"
                        type="datetime" value-format="yyyy-MM-dd"
                        placeholder="选择日期时间"
                        style="width:100%">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="运营里程数" label-width="90px" prop="houseId">
                <el-input v-model="carInsurance.operatingMileage"  placeholder="运营里程数"   style="width: 200px;" ></el-input>
            </el-form-item>

            <el-form-item label="当前投保状态" label-width="90px" prop="buildingId">
                <el-select v-model="carInsurance.insuranceState"   placeholder="请选择当前投保状态" style="width: 200px" >
                    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>

                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center">
<!--            <el-button @click="resetForm('ruleForm')" size="small">取 消</el-button>-->
            <el-button type="primary" @click="submitForm('ruleForm')" size="small">确认保存</el-button>
        </div>
    </el-dialog>
</div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data() {
            var validatePass = (rule, value, callback) => {
                if(this.formMode=='add'){
                    //验证通过就调用save方法
                    axios.get(`/carInsurance/findByNumbers?numbers=${value}`)
                        .then(resp=>{

                            //将服务器返回的数据赋值给pageInfo对象
                            if(resp.data>0){
                                callback(new Error('车辆保险编号存在'));
                            }else {
                                callback();
                            }
                            //alert(this.pageInfo);
                        }).catch(error=>{
                        alert(`服务器出现异常：${error.message}`);
                    })
                }else {
                    callback();
                    //调用修改
                   // this.update();
                }

                // if (value === '') {
                //     callback(new Error('请输入密码'));
                //     console.log("value"+value);
                // } else {
                //     // if (this.ruleForm.checkPass !== '') {
                //     //     this.$refs.ruleForm.validateField('checkPass');
                //     // }
                //     callback();
                // }
            };
            return {
                remoteDisabled: false,
                cars:[],
                loading: false,
                options:[{
                    label:"已投保",
                    value:1
                },{
                    label:"未投保",
                    value:0
                },{
                    label:"已到期",
                    value:2
                }],
                propertyTypes:[],
                //区分是添加还是修改
                formMode:'add',
                param:{
                    pageNum:1,//当前页码
                    pageSize:5,//每页大小
                    //tel:'',//电话
                    //identity:'',//身份证
                    insuranceState:null,
                    insuranceDate:null,
                    deadlineDate:null
                },
                //表格中数据
                tableData: [],
                //前面的复选框，选择了就丢进这个数组
                multipleSelection: [],
                //当前页的对象
                pageInfo:{},
                //是否显示对话框
                dialogFormVisible: false,
                //要添加的对象
                carInsurance:{
                    policyNumber:'',
                    insuranceCompany:'',
                    insuranceDate:'',
                    deadlineDate: '',
                    operatingMileage:'',
                    insuranceState:'',
                    carId:'',
                    carNumber:'',
                    frameNumber:''
                },
                departments:[],
                //车辆保险列表
                carInsurances:[],
                buildings:[],
                houses:[],
                ownerDtos:[],
                //验证规则
                rules: {

                }
            }
        },
        //用来监听某些属性的变化
        watch: {
//注：这里不能使用箭头函数，使用匿名函数
            'param.insuranceState': function (newVal, oldVal) {
                console.info("param.insuranceState：" +newVal + "，旧的值：" + oldVal);
                if (newVal === '') {
                    this.param.insuranceState = null;
                }
            }
        },
        methods: {
            showFrame(value){
                console.log("value"+value);
                axios.get(`/car/findByFrameNumberById/${value}`).then(resp => {
                    this.loading = false;
                    this.carInsurance.frameNumber = resp.data.frameNumber;//this.options = resp.data;
                });
            },
            //上传成功的回调函数
            handleSuccess(message) {
                this.$message.success(message);
//重新加载数据
                this.findByPage();
            },
            //导出Excel
            exportToExcel() {
                location.href = "/carInsurance/exportToExcel";
            },
            //query就是查询字符串
            remoteMethod(query) {
                // alert(query);
                if (query !== '') {
//显示加载中...
                    this.loading = true;
                    //有搜索关键字才后端去查询
//使用axios后台访问服务器 //从服务器上查询包含这个关键字的房屋号
                    axios.get(`/car/findByCarNumber/${query}`).then(resp => {
                        this.loading = false;
                        this.cars = resp.data;//this.options = resp.data;
                    });
                } else {
                    //清空以前的数据
                    this.cars = [];//this.options = [];
                }
            },
            pay(index, row){
                //将对象复制一份，将副本显示到表单中
                let obj={};//创建一个中间对象
                //复制对象方法
                Object.assign(obj,row);
                //显示车位数据在表单中
                this.carInsurance=obj;
                this.carInsurance.status=1;
                //2.发送请求进行删除
                axios.put(`/carInsurance`,this.carInsurance).then(resp=>{
                    if(resp.data>0){
                        this.$message.success(`成功缴费`);
                    }
                }).catch(error=>{
                    this.$message.success(`缴费失败，错误信息：${error.message}`);
                }).finally(()=>{
                    //重新查询一次
                    this.findByPage();
                });
            },
            //查询所有车辆保险类型
            findAllDepartment(){
                axios.get(`/department/findAll`)
                    .then(resp=>{
                        //将服务器返回的数据赋值给pageBean对象
                        this.departments=resp.data;
                        //alert(this.pageBean);
                    }).catch(error=>{
                    alert(`服务器出现异常：${error.message}`);
                })
            },
            //重置所有验证规则
            resetForm(formName){
                this.$refs[formName].resetFields();
                this.dialogFormVisible=false;
            },
            //提交按钮
            submitForm(formName){
                //调用表单的验证方法
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        //表单验证通过，进行提交操作
                        //在此处可以调用相应的提交表单的方法
                        console.log('表单验证通过')
                        //判断是添加还是修改
                        if(this.formMode=='add'){
                            //验证通过就调用save方法
                            this.save();
                        }else {
                            //调用修改
                            this.update();
                        }
                    }else{
                        //验证不通过，提示错误信息
                        console.log('表单验证不通过');
                        return false;
                    }
                })
            },
            //查询所有车辆保险列表
            findOwnerAndHouse(){
                axios.get(`/owner`)
                    .then(resp=>{
                        //将服务器返回的数据赋值给pageInfo对象
                        this.ownerDtos=resp.data;
                        //alert(this.pageInfo);
                    }).catch(error=>{
                    alert(`服务器出现异常：${error.message}`);
                })
            },
            //搜素
            search(){
                //跳到第1页，否则如果当前在后面的页面中，则显示不出来
                this.param.pageNum = 1;
                this.findByPage();
            },
            //分页查询
            findByPage(){
                axios.post(`/carInsurance/findByPage`,this.param)
                    .then(resp=>{
                        //将服务器返回的数据赋值给pageInfo对象
                        this.pageInfo=resp.data;
                        //alert(this.pageInfo);
                    }).catch(error=>{
                    alert(`服务器出现异常：${error.message}`)
                })
            },
            //显示对话框 下一次显示对话框再清空对话框的数据
            showDialog(){
                //改成添加对话框
                this.formMode='add';
                this.remoteDisabled=false;
                this.dialogFormVisible=true;
                //等待页面DOM创建完成后再调用某个方法
                this.$nextTick(()=>{
                    //清空验证规则和表单数据
                    this.$refs.ruleForm.resetFields();
                    //清空表单的内容
                    this.carInsurance={
                        policyNumber:'',
                        insuranceCompany:'',
                        insuranceDate:'',
                        deadlineDate: '',
                        operatingMileage:'',
                        insuranceState:'',
                        carId:'',
                        carNumber:'',
                        frameNumber:''
                    };
                });
            },
            //修改的方法
            update(){
                //修改的功能
                axios.put(`/carInsurance`,this.carInsurance).then(resp=>{
                    if(resp.data===1){
                        //提示修改成功
                        this.$message.success("成功修改车辆保险记录");
                    }else {
                        //提示修改失败
                        this.$message.error("修改车辆保险记录失败");
                    }
                }).catch(error=>{
                    //提示添加失败
                    this.$message.error(error.message);
                    //alert(error.message)
                }).finally(()=>{
                    //隐藏对话框
                    this.dialogFormVisible=false;
                    //再更新表格的内容
                    this.findByPage();
                })
            },
            //确定按钮
            save(){
                //添加功能
                axios.post(`/carInsurance/add`,this.carInsurance).then(resp=>{
                    //添加成功 显示服务器响应数据
                    //提示添加成功
                    this.$message.success(resp.data);
                }).catch(error=>{
                    //提示添加失败
                    this.$message.error(error.message);
                    //alert(error.message)
                }).finally(()=>{
                    //隐藏对话框
                    this.dialogFormVisible=false;
                    //再更新表格的内容
                    this.findByPage();
                })
            },
            onSubmit() {
                console.log('submit!');
            },
            /**
             * 在修改操作的触发事件中，将表单切换为修改模式，在添加操作的触发事件中切换为添加模
             * 式。
             */
            //处理编辑
            handleEdit(index, row) {
                this.remoteDisabled=true;
                console.log(index, row);
                //设置为编辑模式
                this.formMode='update',
                    //显示对话框
                this.dialogFormVisible=true;
                //将对象复制一份，将副本显示到表单中
                let obj={};//创建一个中间对象
                //复制对象方法
                Object.assign(obj,row);
                //显示车辆保险数据在表单中
                this.carInsurance=obj;
            },
            //处理删除
            handleDelete(index, row) {
                console.log(index, row);
                //1.先确认是否要删除
                this.$confirm(`真的要删除车辆保险编号为：${row.policyNumber}这个车辆保险吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //2.发送请求进行删除
                    axios.delete(`/carInsurance/deleteById/${row.id}`).then(resp=>{
                        if(resp.data>0){
                            this.$message.success(`成功删除车辆保险编号为：${row.policyNumber}这个车辆保险`);
                        }
                    }).catch(error=>{
                        this.$message.success(`删除车辆保险编号为：${row.policyNumber}失败，错误信息：${error.message}`);
                    }).finally(()=>{
                        //重新查询一次
                        this.findByPage();
                    });
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                }).catch(() => {
                    //catch不能不写
                    console.log("用户取消删除");
                })
            },
            //处理页面大小变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.param.pageSize=val;
                this.findByPage();
            },
            //处理页码变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.param.pageNum=val;
                //再次查询
                this.findByPage();
            },
            //上面的复选框
            handleSelectionChange(val) {
                //multipleSelection 数组就是选中的所有行的数据
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //批量删除
            deleteBatch(){
                //判断是否选中
                if(this.multipleSelection.length===0){
                    this.$message.warning('请先选中要删除的数据');
                    return;
                }
                //删除前确认
                this.$confirm(`真的要删除${this.multipleSelection.length}个车辆保险吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //把对象数组转成id的数组
                    const ids = this.multipleSelection.map(row=>row.id);
                    console.log("要删除的id：",ids)
                    //2.发送请求进行删除
                    axios.post(`/carInsurance/deleteBatch`,ids).then(resp=>{
                        const row=resp.data;
                        if(resp.data>0){
                            this.$message.success(`成功删除车辆保险${row}个车辆保险信息`);
                        }else {
                            this.$message.error(`删除车辆保险失败`);
                        }
                    }).catch(error=>{
                        this.$message.success(`删除车辆保险失败，错误信息：${error.message}`);
                    }).finally(()=>{
                        //重新查询一次
                        this.findByPage();
                    });
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                }).catch(() => {
                    //catch不能不写
                    console.log("用户取消删除");
                })
            }
        },
        //vue对象创建完毕以后自动调用,所有的组件是基于vue的，所以vue先加载完毕之后组件再加载完毕
        mounted(){
            this.findByPage();
            //查询所有车辆保险列表
          //  this.findOwnerAndHouse();
        //   this.findAllDepartment();
        }
    });
</script>
</body>
</html>